de6a479 introduces a snapshot test app that you can run with textual run tests/snapshot_tests/snapshot_apps/component_classes_opacity.py.

The “empty boxes” are a good thing because I'm using component classes to set colours to transparent.
The screenshot shows that the only widgets that aren't fixed are DirectoryTree, Tree, Checkbox, and RadioButton (i.e., we need to fix Tree and ToggleButton).

The screenshot shows that the previous commits fix #3304.

The reason the (directory) tree and toggle button labels are still white is because they use partial rich styles to enable markup to be used in the labels, which don't currently take into account text opacity.

To know how to resolve this, we need to know what should happen if a widget has mark up and conflicting TCSS.
For example, what should the checkbox Checkbox("[red bold]This is just[/] some text.") look like if the following TCSS is specified:

Checkbox > .toggle--label {
    color: blue;
    text-opacity: 50%;
}

1. The red/bold remains, but faded 50% and the “some text” is blue 50%
2. The red/bold remains and not faded, “some text” is blue 50%
3. The bold remains, the whole text is blue 50%
4. The TCSS overrides the markup completely and everything is just blue 50%
5. The existence of markup overrides the TCSS completely and the TCSS is essentially ignored
6. Some other combination I'm not considering

After I have the answer to this question, I can get to fixing the code so that it complies with what we decide.

I have an alternative solution in mind for _redirect_component_styles. Solution is good, but I want to make this change as part of a larger update.